<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2023-03-13 10:34:04
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2023-03-13 12:27:23
 * @FilePath: \web\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="video" height="200" muted autoplay
        src="./video/1.mp4"
        loop></video>
    <image id="cover-img" class="cover-img" />
    <button id="send">发送</button>
    <script>
        const requer = (url, {
            method = 'GET',
            data = {}
        }) => {
            // const formData = new FormData();
            return fetch(`http://127.0.0.1:3000${url}`, {
                method,
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                },
            }).then((res) => {
                if (res.status === 200) {
                    return res.json()
                } else return {}
            })
        }
        document.getElementById('send').onclick = function () {
            let img = coverVideoToImg()
            testImg(img)
        }

        function testImg(img) {
            requer('/test/img', {
                method: 'POST',
                data: {
                    img
                }
            }).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        }

        function coverVideoToImg() {
            const video = document.querySelector('#video')
            video.setAttribute('crossOrigin', 'anonymous')
            var canvas = document.createElement("canvas");
            canvas.width = video.clientWidth;
            canvas.height = video.clientHeight;
            var ctx = canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
            var base64 = canvas.toDataURL("image/png");
            return base64
        }

        function renderImg(src) {
            const coverImg = document.querySelector('#cover-img')
            coverImg.src = src
        }
    </script>
</body>

</html>